<link rel="stylesheet" href="../library/slider/jslider.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.blue.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.plastic.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.round.css" type="text/css">
<link rel="stylesheet" href="../library/slider/jslider.round.plastic.css" type="text/css">

<script type="text/javascript" src="../library/slider/jshashtable-2.1_src.js"></script>
<script type="text/javascript" src="../library/slider/jquery.numberformatter-1.2.3.js"></script>
<script type="text/javascript" src="../library/slider/tmpl.js"></script>
<script type="text/javascript" src="../library/slider/jquery.dependClass-0.1.js"></script>
<script type="text/javascript" src="../library/slider/draggable-0.1.js"></script>
<script type="text/javascript" src="../library/slider/jquery.slider.js"></script>

<style type="text/css" media="screen">
    .layout-slider { margin-bottom: 60px; width: 50%;}
    .layout-slider-settings { font-size: 50px; padding-bottom: 10px; }
    .layout-slider .jslider-value {background-color: transparent ; }
    .layout-slider .jslider-value span{font-size: 24px; }
    .layout-slider .jslider-scale ins { font-size: 15px !important; }

</style>


<script>
    var failureMessageChooseLocality = "<?php echo TXT_FAILURE_CHOOSE_LOCALITY; ?>";
    var failureMessageCannotBeEmpty = "<?php echo TXT_FAILURE_CANNOT_BE_EMPTY; ?>";
</script>

<p id="subtitle"><?php echo TXT_GENERALITIES; ?></p>

<table id="generalitiesGeneralitiesTab">
    <tr>
        <td>
            <?php echo TXT_LANDSCAPE; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_LANDSCAPE; ?>" />    
        </td>
        <td>
            <input type="radio" name="landscape" value="1" checked> <?php echo TXT_CITY; ?>
            <input type="radio" name="landscape" value="2"> <?php echo TXT_COUNTRYSIDE; ?>
        </td>
    </tr>
    <tr>
        <td class="paddingCell">
            NPA / <?php echo TXT_LOCALITY; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_LOCALITY; ?>" />    
        </td>
        <td>

            <?php /*
              echo '<input type="number" id="NPA" name="NPA" />';
              echo '<select id="city" name="locality">';

              $connection = mysql_connect('153.109.141.81:3306', 'root', '') or die('erreur');
              $db = mysql_select_db('savenrj', $connection) or die('erreur');

              $request = mysql_query('SELECT City FROM city');
              $request2 = mysql_query('SELECT idCity FROM city');
              $nombrelignes = mysql_numrows($request);
              for ($i = 0; $i < $nombrelignes; $i++) {
              $nom = mysql_result($request, $i);
              $id = mysql_result($request2, $i);
              echo '<option value="' . $id . '"> ' . utf8_encode($nom) . ' </option>';
              }
              echo '</select>'; */
            ?>
            <div>
                <div id="map"></div>
                <div class="div.googleMapAddressFormDiv">
                    <label for="address">Address:</label>
                    <input type="text" name="address" id="address"/>
                    <!--<input type="submit" id="addressButton" value="Get Coordinates" />-->
                    <button type="button" id="addressButton" onclick="getInformation()">fjskl</button> 
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <hr color="grey">
        </td>
    </tr>
    <tr>
        <td class="paddingCell">
            <?php echo TXT_HEATING_CONTROL; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_HEATING_CONTROL; ?>" />    
        </td>
        <td>
            <select name="heatingRegulation">
                <option selected value="Veuillez choisir une option">
                    <?php echo TXT_PLEASE_SELECT_AN_OPTION; ?>
                </option>
                <option value="1">
                    <?php echo TXT_TEMPERATURE_CONTROL_BY_ROOM; ?>
                </option>
                <option value="2">
                    <?php echo TXT_TEMPERATURE_CONTROL_BASED_ON_A_REFERENCE_ROOM; ?>
                </option>  
                <option value="3">
                    <?php echo TXT_HEATING_CONTROL_BASED_ON_THE_OUTSIDE_TEMPERATURE; ?>
                </option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="paddingCell">
            <?php echo TXT_INSIDE_TEMP; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_INSIDE_TEMP; ?>" />    
        </td>
        <td class="layout-slider">


            <input id="SliderSingle" name="temperatureIndoor" type="slider" value="20" />
            <script type="text/javascript" charset="utf-8">
                jQuery("#SliderSingle").slider({ from: 15, to: 30, scale: [15, '|', 20, '|', 25, '|', 30],limits: false, step: 0.5, dimension: '', skin: "blue",format: { format: '##.0', locale: 'de' },round: 1 });
            </script>
        </td>
    </tr>
    <tr>
        <td>
            <?php echo TXT_SITUATION_BUILDING; ?>
            <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_SITUATION_BUILDING; ?>" />    
        </td>
        <td>
            <table id="situationBuildingTabs">
                <tr>
                    <td>
                        <img src="../images/forms/generalitiesHeating/heatingNCN.png" />
                    </td>
                    <td>
                        <img src="../images/forms/generalitiesHeating/heatingCCN.png" />
                    </td>
                    <td>
                        <img src="../images/forms/generalitiesHeating/heatingCCC.png" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="chauffage" value="1" checked />
                    </td>
                    <td>
                        <input type="radio" name="chauffage" value="2"/>
                    </td>
                    <td>
                        <input type="radio" name="chauffage" value="3"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<script type="text/javascript">
    var builtYear = new LiveValidation('builtYear',  {onlyOnSubmit: true });
    builtYear.add(Validate.Exclusion, { within: [ 'Veuillez choisir une option' ], failureMessage: failureMessageYearOfBuild } );
       
    var city = new LiveValidation('city', {onlyOnSubmit: true });
    city.add(Validate.Inclusion, { within: [ 'Sion', 'Sierre', 'Martigny'], failureMessage: failureMessageChooseLocality } );

    var occupiedFloors = new LiveValidation('occupiedFloors', {onlyOnSubmit: true });
    occupiedFloors.add(Validate.Numericality, { minimum: 1, maximum: 20 } );
    occupiedFloors.add( Validate.Presence, { failureMessage: failureMessageChooseLocality } );
</script>

